<template>
	<view class="popup">
		<view class="record-life-mask" v-if="isRecord" @click="closeRecord"></view>
		<view class="record-life" :class="{ 'record-life-active': isRecord }">
			<view class="record-life-box">
				<view class="mmsh" @click="catBlindDate(1)">
					<icon class="icon-mmxq"></icon>
					<text>猫咪相亲</text>
				</view>
				<view class="mmsh" @click="catLife(1)">
					<icon class="icon-mmsh"></icon>
					<text>猫咪生活</text>
				</view>
				<view class="mmsh" @click="catBlindDate(2)">
					<icon class="icon-mmzm"></icon>
					<text>猫咪出售</text>
				</view>
				<view class="mmsh" @click="catLife(2)">
					<icon class="icon-mjx"></icon>
					<text>买家秀</text>
				</view>
			</view>
			<!-- 横杆 -->
			<view class="icon-jlsh-HENG"></view>
			<!-- 关闭 -->
			<icon class="icon-jlsh-close" @click="closeRecord"></icon>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isRecord: false
		};
	},
	methods: {
		// 关闭记录生活
		closeRecord: function() {
			this.isRecord = false;
		},

		// 猫咪生活
		catLife: function(type) {
			uni.navigateTo({
				url: `/pages/release/release?type=${type}`
			});
			this.isRecord = false;
		},

		// 猫咪相亲
		catBlindDate: function(type) {
			uni.navigateTo({
				url: `/pages/buyRelease/buyRelease?type=${type}`
			});
			this.isRecord = false;
		}
	}
};
</script>

<style scoped lang="scss">
.record-life-mask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000000;
	opacity: 0.4;
}
.record-life {
	position: fixed;
	bottom: -800rpx;
	left: 0;
	right: 0;
	padding: 117rpx 30rpx 130rpx;
	background: #2a2b2c;
	border-radius: 32px 32px 0px 0px;
	// animation: rotate1 .5s;
	transition: all 0.5s;

	.icon-jlsh-HENG {
		width: 80rpx;
		height: 8rpx;
		background: #d8d8d8;
		border-radius: 4rpx;
		position: absolute;
		top: 32rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.icon-jlsh-close {
		width: 112rpx;
		height: 112rpx;
		position: absolute;
		bottom: 41rpx;
		left: 50%;
		transform: translateX(-50%);
		background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/naber-icon-jlshgb1.png) no-repeat;
		background-size: cover;
	}

	.record-life-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;

		.mmsh {
			display: flex;
			align-items: center;
			flex-direction: column;
			width: 33%;
			// margin-right: 60rpx;
			margin-bottom: 60rpx;
			
			&:nth-of-type(3n){
				margin-right: 0;
			}

			& > icon {
				width: 88rpx;
				height: 88rpx;
				margin-bottom: 13rpx;
			}

			& > text {
				color: #ffffff;
				font-size: 24rpx;
			}

			.icon-mmxq {
				background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/naber-icon-mmxq1.png) no-repeat;
				background-size: cover;
			}

			.icon-mmsh {
				background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/naber-icon-jlsh1.png) no-repeat;
				background-size: cover;
			}

			.icon-mmzm {
				background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/naber-icon-mmmm1.png) no-repeat;
				background-size: cover;
			}
			.icon-mjx {
				background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/buy-show.png) no-repeat;
				background-size: cover;
			}
		}
	}
}

.record-life-active {
	bottom: 0;
}
</style>
